<template>
  <div class="contentWrapper wpx1200" id="contentWrapper">
    <el-card class="box-card mt20"  id="pdfDom">
		  <div slot="header" class="clearfix">
		  	<img src="../../../../static/img/header/wengao.png" alt="" class="cardbg"/>
		    <span>文字检测</span>
		  </div>
		  <div>
		  	<div class="cardContentTop">
		  		 <el-form ref="form" label-width="88px">
					 <myselect  v-on:selectevent="selectevent"></myselect>
					  <div class="w100 clearFix">
					  	<span class="floatr mr10 bgwarn">敏感词</span>
					  </div>
					  <div class="clearFix pt10">
					  	<textarea class="textarea scregular" style="resize:none" v-model="txt" placeholder="请输入要检测的文字" id="leftarea"></textarea>
					  	<div class="textarea ml30"  id="result" ref="result">
					  		<pre class="scregular">
					  			
					  		</pre>
					  	</div>
					  </div>
					  <div class="mt20">
							<el-button type="primary" size="small" @click="check()">开始检测</el-button>
							<el-button size="small" @click="clearAll()">全部清空</el-button>
							<div class="floatr">
								<span class="mr20">文字总数：<span v-text="wordNum"></span></span>
								<span class="mr20">敏感词数量：<span class="jv" v-text="keyNum"></span></span>
								<!--<el-button type="primary" size="small" @click="getPdf()">下载结果</el-button>-->
								<el-button type="primary" size="small" @click="getWord('result')">下载结果</el-button>
							</div>
					  </div>
					</el-form>
		  	</div>
		  </div>
		</el-card>
  </div>
</template>

<script>
import API from "@/api"
import myselect from "@/components/parts/select/select"
export default {
  name: 'textCheck',
  components : {
    myselect
  },
  data () {
    return {
    	fileList: [],
    	wordIndex:'',
    	wordContent:'',
       list:[],
       txt:'',
       wordNum:0,
       keyNum:0,
      htmlTitle: '文图灵辨文本检测结果',
      taskName:""
    }
  },
  mounted: function () {
  	setMinHeight("contentWrapper")
  	var text = document.getElementById("leftarea");
		autoTextarea(text); // 调用
		this.init()
  },
	beforeDestroy: function(){
		sessionStorage.setItem("content","")
	},
   methods: {
   	getWord(){
   		var wordNum = this.wordNum;
   		var keyNum = this.keyNum;
   		$("pre").prepend("<div class='pb20' id='excelTitle'><div>文字总数：" + wordNum + "字</div><div>敏感词数："+ keyNum +"个</div></div>")
			jQuery("#result").wordExport("图文灵辨文字测试报告");
			$("#excelTitle").remove();
   	},
   	init(){
   		if(sessionStorage.getItem("content")){
   			this.txt = sessionStorage.getItem("content")
   			this.check("init")
   		}
   	},
   	selectevent(data){
// 		console.error(data)
   		this.list = data;
   	},
	  check(type){
	  	if(type!="init"){
	  		if(this.list.length == 0){
						this.$message.error('请先选择关键字');
		  			return
		  	}
	  	}
	  	if(this.txt == ''){
	  		this.$message.error('请先输入要检测的文字');
	  			return
	  	}
	  	if(type=="init"){
	  		this.wordContent = sessionStorage.getItem("contentwordList").replace(new RegExp('，','g'),',');
	  	}else{
	  		this.wordContent = ((this.list).wordTxt).replace(new RegExp('，','g'),',');
	  	}
	  	this.taskName = getNowFormatDate();
//	  	console.error(this.wordContent)
	  	var listInfo = this.list;
//  	console.error(url)
//  	return
    	var checkInfo = {
													info: {
														"content":this.txt,
														"wordList":listInfo.wordTxt,
														"wordId":listInfo.wordId,
														"taskName": this.taskName
													},
													token: API.header.getCookie("token"),
													url: "checkContent"
												}
    	if(type=="init"){
    		this.wordNum = (this.txt).replace(/\s+/g,"").replace(/[\r\n]/g,"").length;
			  	var keywordArr = (this.wordContent).split(" ");
			  	var txt = this.txt;
			  	
			  	for(var i=0;i<keywordArr.length;i++){
//			  		txt=txt.replace(keywordArr[i],'<span class="bgwarn">' + keywordArr[i] + '</span>')
			  			txt=txt.replace(new RegExp(keywordArr[i],'g'),'<span class="bgwarn" style="background: #fbdf0f">' + keywordArr[i] + '</span>')
//							string.replace(new RegExp(key,'g'),"b");
			  	}
//			  	console.error(txt)
			  	document.getElementsByTagName("pre")[0].innerHTML = txt 
 			  	this.keyNum = document.getElementsByClassName("bgwarn").length - 1
 			  	return;
    	}
    	this.wordNum = (this.txt).replace(/\s+/g,"").replace(/[\r\n]/g,"").length;
	  	var keywordArr = (this.wordContent).split(" ");
	  	var txt = this.txt;
	  	for(var i=0;i<keywordArr.length;i++){
	  			txt=txt.replace(new RegExp(keywordArr[i],'g'),'<span class="bgwarn" style="background: #fbdf0f">' + keywordArr[i] + '</span>')
	  	}
//			  	console.error(txt)
	  	document.getElementsByTagName("pre")[0].innerHTML = txt 
	  	this.keyNum = document.getElementsByClassName("bgwarn").length - 1;
	  	if(this.keyNum==0){
	  		return false;
	  	}
			API.check.check(checkInfo).then(({data}) => {
		      if(data.code=='0'){
						
		       }else{
						this.$message.error(data.msg);
		       }
	      })
	  },
	  clearAll(){
	  	$("pre").html("");
	  	this.txt ='';
	  	this.wordNum = 0;
	  	this.keyNum = 0;
	  },
	  handleRemove(file, fileList) {
	    console.log(file, fileList);
	  },
	  handlePreview(file) {
	    console.log(file);
	  },
	  handleExceed(files, fileList) {
	    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	  },
	  beforeRemove(file, fileList) {
	    return this.$confirm(`确定移除 ${ file.name }？`);
	  }
	}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#app {
		/*text-align: left;*/
	}
	.textarea {
    width: 521px;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    min-height: 400px;
    padding: 20px;
    float: left;
    font-family: "Microsoft YaHei ","Hiragino Sans GB",Arial;
    font-size: 14px;
	}
	.overflowY{
    overflow-y: auto;
	}
	pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: "Microsoft YaHei ","Hiragino Sans GB",Arial
	}
</style>
